<?php $this->load->view('header');?>
<body class="childrenBody" style="background-color: #f2f4f8">

<div class="m_top">
	<div class="_headimg">
		<?php if ($headimg):?>
		<img src="<?=$headimg?>" alt="">	
		<?php else:?>
		<img src="images/default_head.png" alt="">	
		<?php endif;?>
	</div>
	<div class="_user">
		<h4><?=$nickname?></h4> 
		<p class="_tel">电话：<?=$mobile?></p>
		<p style="margin: 20px;">
			<span style="background: #08ad8e; color: #fff;padding: 2px;border: 1px solid #08ad8e;border-radius: 4px;">教练</span>
		</p>
	</div>
	<div style="float: right;margin: 50px;"> 
		<div class="layui-inline">
			<a class="layui-btn layui-btn-primary Edit_btn">编辑</a>
		</div>
	</div>
</div>

<div style="margin: 20px 30px;">
	<div class="layui-tab layui-tab-brief" lay-filter="TabBrief">
	  <ul class="layui-tab-title">
	    <li class="layui-this">员工分析</li>
	    <li>预约记录</li>
	    <li>员工资料</li>
	    <li>会员列表</li>
	  </ul>
	  <div class="layui-tab-content">
	  	<!-- 员工分析 -->
	    <div class="layui-tab-item layui-show">
    		<div style="overflow: hidden;">
	    		<div class="_tab" style="margin: 20px 120px;background-color: #0cc3aa">
					<div class="_overview_msg">
						<h5>本月新增预约</h5> 
						<p class="_count"><?=$m_num?></p> 
						<p class="tips">本周&emsp;<?=$w_num?></p>
					</div>
	    		</div>
	    		<div class="_tab2" style="margin: 20px 120px;">
					<div class="_overview_msg">
						<h5>本月上课数</h5> 
						<p class="_count"><?=$attend_num?></p> 
						<p class="tips">预约率&emsp;<?=$app_percen?></p>
					</div>
	    		</div>
    		</div>
			<div class="_yuyue">
				<div class="_data_title">
					<b>预约曲线</b>
				</div>
					<div class="layui-btn-group" style="margin: 10px 0px 10px 20px;">
						<button class="layui-btn layui-btn-primary layui-btn-small ThirtyBtn clickbtclass">近30天</button>
						<button class="layui-btn layui-btn-primary layui-btn-small Sixty">近60天</button>
						<button class="layui-btn layui-btn-primary layui-btn-small Ninety">近90天</button>
					</div>
					<div class="layui-inline">
					  <div class="layui-input-inline">
					    <input type="text" class="layui-input" id="test" placeholder="选择时间段" style="height: 32px;">
					  </div>
					</div>
				<div id="container"></div>
			</div>
	    </div>

	    <!-- 预约记录 -->
	    <div class="layui-tab-item">
	    	<div class="mdata_tab">
	    		<div class="_data_title">
					<b>预约记录</b>
				</div>
				<table class="layui-table" lay-even="" lay-skin="line" style="margin-top: 0;">
				    <thead>
						<tr>
							<th>上课时间</th>
							<th>课程名称</th>
							<th>类型</th>
							<th>教练</th>
							<th>人数</th>
							<th>状态</th>
							<th>预约时间</th>
						</tr> 
				    </thead>
					<tbody class="goods_content" id="applog"></tbody>
				</table>
	    	</div>
	    </div>

	    <!--员工资料 -->
	    <div class="layui-tab-item">
	    	<div class="mdata_tab">
	    		<div class="_data_title">
					<b>详细信息</b>
				</div>
				<div class="muser_info">
					<div style="width: 70%;float: left;">
						<ul>
							<li><p><i class="mdata_title">姓名：</i><?php if ($nickname):?><?=$nickname?><?php else:?>未设置<?php endif;?></p></li>
							<li><p><i class="mdata_title">性别：</i><?php if ($sex == 1):?>男<?php else:?>女<?php endif;?></p></li>
							<li><p><i class="mdata_title">电话：</i><?php if ($mobile):?><?=$mobile?><?php else:?>未设置<?php endif;?></p></li>
							<li><p><i class="mdata_title">所属场馆：</i>未设置</p></li>
							<li><p><i class="mdata_title">简介：</i><?php if ($info):?><?=$info?><?php else:?>未设置<?php endif;?></p></li>
						</ul>
					</div>
					<div style="width: 30%;float: right;text-align: right;">
						<?php if ($headimg):?>
						<img src="<?=$headimg?>" alt="" style="width: 100px;border-radius: 100%;height: 100px;margin: 15px 80px 0 0;">
						<?php else:?>
						<img src="images/default_head.png" alt=""  style="width: 100px;border-radius: 100%;height: 100px;margin: 15px 80px 0 0;">	
						<?php endif;?>	
					</div>
				</div>
	    	</div>
	    </div>
		
		<!--会员列表 -->
		<div class="layui-tab-item">
			<div class="mdata_tab">
				<table class="layui-table" lay-even="" lay-skin="line" style="margin-top: 0;">
				    <thead>
						<tr>
							<th>姓名</th>
							<th>电话</th>
							<th>教练</th>
							<th>状态</th>
							<th>操作</th>
						</tr> 
				    </thead>
					<tbody class="goods_content" id="plan"></tbody>
				</table>
	    	</div>
		</div>

	  </div>
	</div>
</div>

<!-- 模板 -->
<script id="demo4" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
		<tr>
		  <td>{{ item.sdate }}<br>{{ item.stime }}</td>
		  <td>{{ item.name }}</td>
		  <td>{{ item.type }}</td>
		  <td>{{ item.nickname }}</td>
		  <td>{{ item.num }}</td>
		  <td>{{ item.status }}</td>
		  <td>{{ item.addtime }}</td>
		</tr>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
      暂无数据
    {{#  } }} 
</script>

<script id="demo5" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
		<tr>
		  <td>{{ item.nickname }}</td>
		  <td>{{ item.mobile }}</td>
		  <td>{{ item.coach_name }}</td>
		  <td>正常</td>
		  <td>
		    <a class="layui-btn layui-btn-mini layui-btn-primary" id="viewUser{{ item.user_id }}" title="详情">
		      <i class="layui-icon">&#xe60a;</i>
		    </a>
		  </td>
		</tr>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
      暂无数据
    {{#  } }} 
</script>

<script>
layui.config({
	version: true
}).use(['element','jquery','layer', 'laytpl', 'form', 'laydate'], function(){
  var layer = parent.layer === undefined ? layui.layer : parent.layer,
		element = layui.element,
		laytpl = layui.laytpl,
		laydate = layui.laydate,
		form = layui.form,
		$ = layui.jquery;

		var uid = <?=$coach_id?>;
		var date=new Date();
		var maxDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(date.getDate()-1); //获取当前年份

		load_data_list(uid,30);

		element.on('tab(TabBrief)', function(data)
		{
			if (data.index == 1) {
			  load_appoint_data(data.index,uid);
			}

			if (data.index == 3) {
				load_plan_data(uid);
			}

		});

		//编辑
		$('.Edit_btn').click(function() 
		{
			var index = layui.layer.open({
				title : "编辑教练",
				type : 2,
				content : "admin.php/Coach/coach_info/"+uid,
				cancel: function(index, layero){ 
					location.reload();						 
				}  
			})

			//改变窗口大小时，重置弹窗的高度，防止超出可视区域
			$(window).resize(function(){
				layui.layer.full(index);
			})
			layui.layer.full(index);
		});

		//近30天
		$('.ThirtyBtn').click(function(event) 
		{
			load_data_list(uid,'30');
			$(".ThirtyBtn").addClass("clickbtclass");
			$(".Sixty").removeClass('clickbtclass');
			$(".Ninety").removeClass('clickbtclass');
		});

		//近60天
		$('.Sixty').click(function(event) 
		{
			load_data_list(uid,'60');
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".Sixty").addClass('clickbtclass');
			$(".Ninety").removeClass('clickbtclass');
		});

		//近90天
		$('.Ninety').click(function(event) 
		{
			load_data_list(uid,'90');
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".Sixty").removeClass('clickbtclass');
			$(".Ninety").addClass('clickbtclass');
		});


		//日期范围
		laydate.render({
			elem: '#test'
			,range: true
			,max: maxDate
			,btns: ['confirm']
		    ,done: function(value, date, endDate)
		    {
		    	load_data_list(uid,value);
				$(".ThirtyBtn").removeClass("clickbtclass");
				$(".FifteenBtn").removeClass('clickbtclass');
				$(".SevenBtn").removeClass('clickbtclass');
		    }
		});


		function load_data_list(cid,dtnum)
		{
			$.get('admin.php/Coach/get_appoint',{coach_id:cid,date_num:dtnum}, function(data) 
			{
				if (data.status == 200) 
				{
					var d = data.appoint_num;
					var m = [];	
					for (var i = 0; i < d.length; i++) {
						m.push(parseInt(d[i]));
					}

					var chart = Highcharts.chart('container', {
			                title: {
			                    text:null,
			                },
			                chart: {
								type:'spline'
							},
			                xAxis:{
			                	gridLineWidth: 1,
			                	categories: data.date_list
			                },
			                yAxis: {
			                   title:'',
			                   allowDecimals:false
			                },
			                legend: {
			                    enabled: false
			                },
			                credits: {
			                    enabled: false
			                },
			                exporting: {
			                    enabled: false
			                },
			                series: [{
			                        name: '数量',
			                        data: m
			                }],
			                colors: ['#0cc3aa','#0f8df2'],
			        });

				}

			},'json');

		}


		//获取预约记录
		function load_appoint_data(_index,uid)
		{
			$.get('admin.php/Coach/get_bespeak/'+uid, function(data) 
			{
				var getTpl = demo4.innerHTML;
				laytpl(getTpl).render(data, function(html){
				  $('#applog').html(html);
				});

			},'json');
		}


		//获取会员
		function load_plan_data(uid)
		{
			$.get('admin.php/Coach/get_user/'+uid, function(data) 
			{
				var getTpl = demo5.innerHTML;
				laytpl(getTpl).render(data, function(html){
				  $('#plan').html(html);
				});

				layui.each(data.list, function(index, el) 
				{
					$('#viewUser'+el.user_id).click(function(event) 
					{
						var index = layui.layer.open({
							title : "会员详情",
							type : 2,
							content : "admin.php/UserMember/member_info/"+el.user_id,
						})

						//改变窗口大小时，重置弹窗的高度，防止超出可视区域
						$(window).resize(function(){
							layui.layer.full(index);
						})
						layui.layer.full(index);

					});

				});

			},'json');

		}

});
</script>



</body>
</html>